<script setup lang="ts">
import {computed} from "vue";
import TimeCountDown from '@/components/timeCountDown/index.vue'
import {userConfigStore} from "@/store/user/userConfigStore";
import {message} from "ant-design-vue";

//@ts-ignore
const userTag = computed(() => userConfigStore().userInfo.userTag)
const emit = defineEmits(['payCallback']);
const props = defineProps({
  product: {
    type: Object,
    required: true
  },
  resourceType: {
    type: String,
    required: true
  },
  showPayWindow: {
    type: Boolean,
    required: true
  }
});
function beforeClose() {
  emit("payCallback", false);
}
function clickHandle() {
  message.warning('功能暂未适配！')
}
</script>

<template>
  <a-modal v-model:open="props.showPayWindow"
           centered
           :closable="false"
           @cancel="beforeClose">
    <template #title>
      <span class="block w-full text-center">支付确认</span>
    </template>
    <a-row :gutter="[16,16]" class="mt-4">
      <a-col :span="8">
        <div v-if="product.images" style="height: 160px;">
          <a-image class="h-full w-full border-t-[5px] border-l-[5px] border-r-[5px]" :src="product.images"
                   :preview="false"/>
        </div>
      </a-col>
      <a-col :span="16">
        <div class="h-20 bg-white border-b-[5px] border-l-[5px] border-r-[5px] p-[5px]">
          <div class="h-[1.875rem]">
            <a-tag color="blue" v-if="product.chargeType == 1">免费</a-tag>
            <a-tag color="red" v-if="product.chargeType == 2">一口价</a-tag>
            <a-tag color="purple" v-if="product.chargeType == 3">限时折扣</a-tag>
            <a-tag color="orange" v-if="product.chargeType == 4">会员免费</a-tag>
            <span class="font-bold text-base" style="color: #409EFF;">{{ product.title }}</span>
          </div>
          <div class="h-[3.75rem]">
            <div class="pay-summary" title="商品描述">
              {{ product.summary }}
              <a-tag color="geekblue" v-if="resourceType == 'BLOG'">文章</a-tag>
              <a-tag color="orange" v-else-if="resourceType == 'SUBJECT'">专栏</a-tag>
              <a-tag color="processing" v-else-if="resourceType == 'RESOURCE'">资源</a-tag>
              <a-tag color="gold" v-else-if="resourceType == 'VIP'">会员</a-tag>
              <a-tag color="volcano" v-else-if="resourceType == 'PRODUCT'">商品</a-tag>
            </div>
            <div class="mt-2 float-left" v-if="product.discountStartTime && product.discountEndTime">
              <TimeCountDown :startTime="product.discountStartTime"
                             :endTime="product.discountEndTime"
                             endText="优惠活动已结束 "/>
            </div>
          </div>
          <div class="pay-price-info">
            <span class="font-light text-[14px]" style="color: #999999;"
                  v-if="product.payOrderCount > 0">{{ product.payOrderCount }}人购买</span>
            <span class="float-left mr-2.5 text-[18px]" style="color: #076FE2; font-weight: 500;">
              <span class="price blue bold" v-if="!product.price">免费</span>
              <span class="price blue bold" v-else-if="product.price == product.discountPrice">
                <!--如果是会员免费-->
                <span v-if="product.chargeType == 4 && userTag > 0">
                  <span v-if="product.payType == 1">
                    <span>0 积分</span>
                    <span style="text-decoration: line-through; color: #999999; font-size: 14px;">
                      {{ product.price }} 积分
                    </span>
                  </span>
                  <span v-else>
                    <span>￥0 </span>
                    <span style="text-decoration: line-through; color: #999999; font-size: 14px;">
                      ￥{{ product.price / 100 }}
                    </span>
                  </span>
                </span>
                <span v-else>
                  <span v-if="product.payType == 1">
                    {{ product.price }} 积分
                  </span>
                  <span v-else>
                    ￥{{ product.price / 100 }}
                  </span>
                </span>
              </span>
              <span class="price blue bold" v-else-if="product.price != product.discountPrice">
                <span v-if="product.payType == 1">
                  <!--判断是否处于折扣-->
                  <span v-if="product.betweenDiscount">
                    <span class="mr-2">{{ product.discountPrice }} 积分</span>
                    <span style="text-decoration: line-through; color: #999999; font-size: 14px;">{{ product.price }} 积分</span>
                  </span>
                  <span v-else>
                    <span>{{ product.price }} 积分</span>
                  </span>
                </span>
                <span v-else>
                  <!--判断是否处于折扣-->
                  <span v-if="product.betweenDiscount">
                    <span class="mr-2">￥{{ product.discountPrice / 100 }} </span>
                    <span style="text-decoration: line-through; color: #999999; font-size: 14px;">￥{{product.price / 100}}</span>
                  </span>
                  <span v-else>
                    <span>￥{{ product.price/100 }} </span>
                  </span>
                </span>
              </span>
            </span>
          </div>
          <div class="pay-operation">
            <a-row class="mt-1.5">
              <a-col :span="12">
                <!--todo-->
              </a-col>
            </a-row>
          </div>

        </div>
      </a-col>
    </a-row>
    <template #footer>
      <a-button type="primary" class="w-full" @click="clickHandle">下单购买</a-button>
    </template>
  </a-modal>
</template>

<style scoped lang="less">
.pay-summary:before {
  content: attr(title)+'：';
  color: rgb(148 163 184);
}
</style>
